<template>
  <!-- 预览试卷 -->
  <div id="preview-test-paper">
    <div id="test-download-content">
        <div class="preview-top">
        <div class="preview-title">
            <span class="printing-title">考试名称：{{ resData.paperName }}</span>
        </div>
        <div class="preview-text">
            <span class="abc">总分数：{{ resData.score }}分</span>
            <span>考试时间：{{ resData.timeLength }}分钟</span>
        </div>
        </div>
        <div class="jx-content preview-content">
        <!-- <span class="printing-notice">提示：学生作答时，每个学生的答题类型的答题顺序相同，每个类型中答题的顺序不相同。</span> -->
        <div v-for="(item,index) in resData.content" :key="index">
            <h2 class="tq-title">{{ questionNumber[index] }}、
            <span v-if="questionName.find(x=>x.type==item.type)">{{ questionName.find(x=>x.type==item.type).name }}</span>(每题{{ item.score }}分，共{{ item.content.length }}题)</h2>
            <dl v-for="(item2,index2) in item.content" :key="index2">
            <dt class="printingfs14 markdown-body">
                {{ index2+1 }}.
                <span style="white-space: pre-wrap;" v-html="item2.content"></span>
                <!-- 选择题 单选多选 -->
                <span v-if="item.type == 1">
                <span v-if="!item2.isMultipleChoice">[单选题]</span>
                <span v-if="item2.isMultipleChoice">[多选题]</span>
                </span>
                <!-- 括号 选择题判断题显示括号 -->
                <span v-if="item.type <= 2">(&nbsp;&nbsp;&nbsp;&nbsp;)</span>
                ({{ item.score }}分)
                <!-- 简答题加4个换行 -->
                <div v-if="item.type == 4">
                <br /><br /><br /><br />
                </div>
            </dt>
            <dd class="printing-abcd" v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
                <div style="margin:10px 0;white-space: pre-wrap;"  v-html="qKey[index3] + '. ' + item3"></div>
            </dd>
            </dl>
        </div>
        </div>
    </div>
    <div class="btn-group">
        <!-- <div class="button-style" @click="submitData">保存</div> -->
        <div class="button-style" @click="downloadWord">
        <span class="download">下载试卷</span>
        </div>
        <el-tooltip class="item" effect="dark" content="请使用Microsoft word打开、编辑下载文件" placement="bottom">
        <i style="vertical-align: -1px;" class="iconfont icon-wenti-m c-blue fs18"></i>
        </el-tooltip>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      //上个页面接收的数据
      paramsData: [],
      //接收的题目列表
      resData: [],
      //选择题
      questionList1: null,
      //判断题
      questionList2: null,
      //填空题
      questionList3: null,
      //简答题
      questionList4: null,
      //编程题
      questionList5: null,
      qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      questionNumber: ["一", "二", "三", "四", "五", "六"],
      questionName: [
        {
          type: 1,
          name: "选择题"
        },
        {
          type: 2,
          name: "判断题"
        },
        {
          type: 3,
          name: "填空题"
        },
        {
          type: 4,
          name: "简答题"
        },
        {
          type: 5,
          name: "编程题"
        },
        {
          type: 6,
          name: "实验题"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
      this.getPaper();
      //this.pToSpan();
    },
    //下载word
    downloadWord() {
      let that = this;
      $("#test-download-content").wordExport(that.resData.paperName);
    },
    //接收数据
    getData() {
      let that = this;
      let storage = window.localStorage;
      let data = storage.getItem("previewPaperData");
      that.paramsData = JSON.parse(data);
      if (that.questionList) {
      }
    },
    submitData() {
      var that = this;
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper",
          that.resData
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取试题
    getPaper() {
      var that = this;
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/preview",
          that.paramsData
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.resData = res.data.data;
              that.resData.score = that.paramsData.score;
              let content = that.resData.content;
              //替换填空题括号
              //填空题替换(+)为（）
              $.each(content, function(i, d) {
                if (d.type == 3) {
                  $.each(d.content, function(i2, d2) {
                    let str = d2.content;
                    var result = str.replace(
                      /\(\+\)/g,
                      "（&nbsp;&nbsp;&nbsp;&nbsp;）"
                    ); //把(+)替换成()

                    d2.content = result;
                  });
                }
              });

              //所有p标签替换为span
              let pstr = JSON.stringify(that.resData);
              let result = that.pToSpan(pstr);
              result = JSON.parse(result);
              that.resData = result;
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    pToSpan(str) {
      //let str = '<p><b>123123<b/></p>';
      //let reg = /<[^>]*>|<\/[^>]*>/gm;
      //let reg = /<([\/]?)(p)((:?\s*)(:?[^>]*)(:?\s*))>/g;
      let reg1 = /<p>/g;
      let reg2 = /<\/p>/g;
    //   let reg3 = /\\n/g;
      let result = str.replace(reg1, "<span>");
      result = result.replace(reg2, "</span>");
      return result;
    },
    eee() {
      this.$downloadfile.download(
        "/tes/course/" +
          this.$localstorage.getLocalStorage("setCourseId") +
          "/businessType/1/question-repository/model",
        "hehehe.xls"
      );
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
.printing-title {
}
#preview-test-paper {
  img {
    max-width: 80%;
  }
  background: #f8f8f8;
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  .c-blue {
    color: #385899;
  }
  .c-btnblue {
    color: #1277eb;
  }
  .printing-notice {
    color: #1277eb;
  }
  .preview-top {
    width: 1200px;
    height: 335px;
    margin: 20px auto 0;
    text-align: center;
    box-sizing: border-box;
    padding-top: 74px;
    color: #fff;
    background: #fff url("../../../assets/images/previewTestPaper-bg.png")
      no-repeat 0 0;
    background-size: contain;
    .preview-title {
      font-size: 40px;
    }
    .preview-text {
      font-size: 18px;
      margin-top: 16px;
      > span {
        margin: 0 5px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 0px auto 20px;
    color: #474747;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    p {
      display: inline;
    }
    .tq-title {
      color: #474747;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
    
  }
  .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
}
</style>
